<template>
  <view class="main">

    <view class="content">
      <view class="top">
        <view class="title dispaly-center">
          <view class="ipt">
            <view class="ip-box">
              <view class="ip-bg">
                <image src="/static/icon/s.png" mode="aspectFill"/>
              </view>
              <view class="input dispaly-center">
                <view class="s-icon">
                  <image src="/static/image/search.png" mode="aspectFill"/>
                </view>
                <input placeholder="搜索"/>
              </view>
            </view>
          </view>
        </view>
        <view class="cate">
          <view class="cate-box">
            <view class="cate-img">
              <image src="/static/image/sort-bg.png" mode="aspectFill"/>
            </view>
            <view class="sort">
              <view class="sort-item dispaly-center" v-for="(item, index) in sortList" :key="index">
                <view class="s dispaly-center">
                  <view class="s-left">{{ item.name }}</view>
                  <view class="s-right">
                    <image src="/static/image/sort.png" mode="aspectFill"/>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="product" :style="{marginTop: cateHeight + 'px'}">
        <ProductList/>
      </view>
    </view>
  </view>
</template>

<script setup>
import ProductList from "../../components/productList/productList.vue";
import {getElementHeight} from '@/utils/util'
import {ref, onMounted} from 'vue';

const sortList = ref([
  {name: '时间', type: 1},
  {name: '价格', type: 2},
  {name: '收藏', type: 3},
])
// 获取元素高度
const cateHeight = ref(0)
onMounted(async () => {
  const res = await getElementHeight('.top')
  cateHeight.value = res
})
</script>

<style lang="scss" scoped>
$i-height: 68rpx;
$i-width: 692rpx;
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #ffbf0f;
}
.title {
  display: flex;
  justify-content: center;
  .ipt {
    .ip-box {
      position: relative;
      width: $i-width;
      height: $i-height;

      .ip-bg {
        image {
          width: $i-width;
          height: $i-height;
        }
      }

      .input {
        width: $i-width;
        height: $i-height;
        position: absolute;
        top: 0;
        left: 24rpx;

        .s-icon {
          height: $i-height;
          line-height: $i-height;
          padding-top: 5rpx;
          margin-right: 10rpx;

          image {
            width: 36rpx;
            height: 36rpx;
          }
        }
      }
    }
  }
}

.content {
  .cate {
    padding: 13rpx 22rpx;

    .cate-box {
      position: relative;

      .cate-img {
        image {
          width: 100%;
          height: 78rpx;
        }
      }

      .sort {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        top: 20%;
        right: 40rpx;

        .sort-item:last-child {
          margin-right: 0;
        }

        .sort-item {
          margin-right: 60rpx;

          .s {
            .s-left {
              font-family: IPix;
              font-size: 28rpx;
              color: #4E3B0C;
              margin-right: 10rpx;
            }

            .s-right {
              image {
                width: 22rpx;
                height: 30rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>